import React, { Component, useEffect } from 'react';
import * as echarts from 'echarts';
import type { Dayjs } from 'dayjs';
import { Calendar, theme } from 'antd';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';





type EChartsOption = echarts.EChartsOption;

const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
    console.log(value.format('YYYY-MM-DD'), mode);
};
function HomePage() {
    const { token } = theme.useToken();
    useEffect(() => {
        var chartDom = document.getElementById('main')!;
        var myChart = echarts.init(chartDom);
        option && myChart.setOption(option);
    });
    const wrapperStyle: React.CSSProperties = {
        width: 300,
        border: `1px solid ${token.colorBorderSecondary}`,
        borderRadius: token.borderRadiusLG,
    };
    var option: EChartsOption;
    option = {
        title: {
            text: '所有隐患分布图',
            subtext: '详情',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 10, name: '待验证' },
                    { value: 7, name: '已完成' },
                    { value: 5, name: '待审核' },
                    { value: 4, name: '待处理' },

                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    return (
        <div>
            <div>
                <div style={{ width: '100%', height: '180px', background: '#1890ff', borderRadius: '10px', textAlign: 'center', fontSize: '80px', lineHeight: '180px', color: 'white' }}>
                    <div>首页</div>
                    <div style={wrapperStyle}>
                        <Calendar fullscreen={false} onPanelChange={onPanelChange} />
                    </div>
                </div>
                <div id='main' style={{ height: '500px', width: '600px', float: 'right' }}>
                </div>

            </div>
        </div>
    );
}

export default HomePage;
